<template>
  <div>
    <el-select v-model="city" @change="selectedCtiy" value-key="cityId" placeholder="请选择市" :size="size">
      <el-option
        v-for="item in citys"
        :key="item.cityId"
        :label="item.cityName"
        :value="item">
      </el-option>
    </el-select>
    <el-select v-model="area" @change="selectedArea" value-key="areaId" placeholder="请选择县" :size="size">
      <el-option
        v-for="item in areas"
        :key="item.areaId"
        :label="item.areaName"
        :value="item">
      </el-option>
    </el-select>
  </div>
</template>
<script>
import getDatas from './ctiyCountyDatas'

export default {
  name: 'selectctiycounty',
  title: '市县选择器',
  data() {
    return {
      citys: [],
      areas: [],
      city: {},
      area: {}
    }
  },
  props: {
    size: {
      type: String,
      default: 'medium'
    },
    value: {
      type: Array
    },
    defaultFirst: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: 'survey/areaInfo/getCityInfo'
    },
    allCity: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    if (this.allCity) {
      this.getCtiy(this.url)
    } else {
      this.getCtiy(this.url)
    }
    
  },
  methods: {
    getCtiy () {
      getDatas(this, this.url).then((citys) => {
        // console.log('getDatas-->', citys);
        this.citys = citys
        this.$nextTick(() => {
          if (this.defaultFirst) {
            this.city = this.citys[1]
            this.selectedCtiy(this.city)
          }
        })
      })
    },
    selectedCtiy (city) {
      this.areas = city.areaDatas
      this.$nextTick(() => {
        if (this.defaultFirst) {
          this.area = this.areas[1]
          this.selectedArea(this.area)
        }
      })
      this.$emit('change-city',  this.city)
      this.area = {}
    },
    selectedArea (area) {
      this.$emit('input', [this.city, this.area])
      this.$emit('change-area',  [this.city, this.area])
    }
  }
}
</script>